<template>
  <div class="box">
    <UnfoldFold :text="textareaval"></UnfoldFold>
  </div>
  <div class="box">
    <UnfoldFold :text="textareaval2" class-name="omit_line3"></UnfoldFold>
  </div>
  <div class="box">
    <UnfoldFold :text="textareaval3" class-name="omit_line3"></UnfoldFold>
  </div>
  <div class="box">
    <UnfoldFold :text="textareaval3"></UnfoldFold>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { UnfoldFold } from '@/components'
const textareaval = ref(
  '首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,UI结构,实现折叠与展开功能 1. 在侧边栏内部,在侧边栏菜单区域之前,放置一个DIV。 2. 在该DIV上面添加文本,通过点击该DIV,触发菜单折叠与展开 3.通过类选择器,为该DIV 添加相关样式 .'
)

const textareaval2 = ref(
  '首先应该在菜单顶部放一个折叠展开的按钮条 2.2 接下来,UI结构,实现折叠与展开功能 1. 在侧边栏内部,在侧边栏菜单区域之前,放置一个DIV。 2. 在该DIV上面添加文本,通过点击该DIV,触发菜单折叠与展开 3.通过类选择器,为该DIV 添加相关样式 .'
)
const textareaval3 = ref('首先应该在菜单顶部放一个在择.')
</script>
<style scoped>
.box {
  width: 500px;
  border: 1px solid #000;
  font-size: 16px;
  color: #131313;
  line-height: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  padding: 20px;
  line-height: 1.8;
}
</style>
